<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue使用alyer</title>
  <link rel="stylesheet" href="../static/music/APlayer.min.css">
  <script src="../static/music/APlayer.min.js"></script>
</head>
<body>
<div id="aplayer"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let vm3 = new Vue({
        el: "#aplayer",

        data: {
            id: "2314766620", //这里是我音乐盒的id  查找自己音乐盒就到网易云web端查看url的id值
            uri:"getPlayList", // 自己设置的请求地址
            audio: [] // 储存返回来的信息
        },
        mounted(){
            var playerOption = {// 设置播放器基本参数
                container: document.getElementById('aplayer'),
                audio: []
            };

            this.initAplayer(playerOption,this.id); //参数放到初始化方法中
        },

        methods:{
            initAplayer(playerOption,id){
                var url = "http://localhost:8080/" + this.uri +  "?listId="+id;
                //这里就是axios 请求的方式
                axios.get(url).then(response => {
                    console.log(response.data)
                    playerOption.audio=response.data;
                    var ap = new APlayer(playerOption);
                }).catch(function (error) {
                    console.log(error);
                    alert('获取歌单信息失败！');
                });
            }
        }
    });
</script>
</body>
</html>